<template>
    <el-form ref="formRef" :model="form"  label-width="120px">
        <el-form-item prop="name" label="分类名称" style="width:92%;">
            <el-input v-model="form.name" placeholder="请填写名称" />
        </el-form-item>
        <el-form-item label="分类级别">
            <el-radio-group v-model="showMore" >
                         

            <el-radio :label="true" :disabled="form.id!==0 && !form.pid">
                二级分类
            </el-radio>
            <el-radio :label="false" :disabled="form.id!==0 && !form.pid">
                一级分类
            </el-radio>

            </el-radio-group>
        </el-form-item>
        <el-form-item v-show="showMore" label="上级分类" prop="pid">
            <el-select v-model="form.pid" placeholder="请选择上级分类名称">
                <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
        </el-form-item> 
        <!-- // 图片上传 -->
        <!-- <el-form-item label="分类图片" v-show="showMore"> -->
            <!-- <el-upload
                ref="uploadRef"
                class="upload-demo"
                v-model:file-list="fileList"
                :action="uploadPictureURL()"
                :headers="{ jwt: token }"
                :data="{ type: 'category_picture' }"
                :limit="1"
                :on-exceed="handleExceed"
                :on-success="uploadSuccess"
                >
                <template #trigger>
                <el-button type="primary">请选择图片</el-button>
                </template>
                <template #tip>
                <div class="el-upload__tip">图片文件大小不超过500KB</div>
                </template>
            </el-upload> -->
        <!-- </el-form-item> -->
        <el-form-item>

            <el-button type="primary" @click="editSubmit" v-if="id">修改</el-button>
            <el-button type="primary" @click="addSubmit" v-else>添加</el-button>
            <el-button @click="btnCancel">重置</el-button>

        </el-form-item>
    </el-form>
</template>




<script setup>


import {getCategoryList,getCategory,addCategory,editCategory} from '../api/index';
import { reactive } from 'vue';
import { ref,onMounted} from 'vue';
// import useToken from '../stores/token';
// import notification from '../utils/notification'


const categoryList=ref()
const showMore=ref(false)
onMounted(()=>{
    loadCategory()
})
const loadCategory=async()=>{
    if(form.id){
       const data = await getCategory({id:form.id})
       //
       Object.assign(form,data)
    }
    const list=await getCategoryList()
    categoryList.value=filters(item=>item.pid)
    const showMore=form.pid!=0
}

const emit=defineEmits(["success"])

const props=defineProps({
    id:{type:Number}
})

const form=reactive({
    id:props.id,
    name:'',
    pid:'',
    picture:''

})
// 重置
const formRef=ref()
const btnCancel=()=>{
    formRef.value.resetFields()
    loadCategory()
}

const resetForm=id=>{
    form.id=id
    btnCancel()
}
defineExpose({resetForm})

//
const addSubmit=async()=>{
    const data={
        name:form.name,
        pid:form.pid,
        picture:form.picture
    }
    if(await addCategory(data)){
        emit("success")
    }
}

const editSubmit=async()=>{
    if(await editCategory(form)){
        emit("success")
        
    }
}














// const props=defineProps({
//     id:{type:Number}

// })
// //获取输入数据
// const form=reactive({
//     id:props.id,
//     name:'',
//     pid:'',
//     picture:''
// })
// //存入一级分类数据

// const showMore=ref(false)
// const categoryList=ref([])
// onMounted(()=>{
//     loadCategory()
// })
// //加载数据
// const loadCategory=async()=>{
//     if(form.id){
//         const data=await getCategory({id:form.id}) //获取当前id数据
//         Object.assign(form,data) //回写
//     }
//     const list  =await  getCategoryList()
//     categoryList.value=list.filter(item=>item.pid==0)
//     showMore.value=form.pid!=0
// }
// //接受父组件传来的方法

// const emit=defineEmits(['success'])
// //重置数据
// const formRef=ref([])
// const btnCancel=()=>{
//     formRef.value.resetFields()
//     loadCategory()
// }
// const resetForm=id=>{
//     form.id=id
//     btnCancel()
// }
// defineExpose({resetForm})


// //添加按钮

// const addSubmit=async()=>{
//     const data={
//         name:form.name,
//         pid:form.pid,
//         picture:form.picture

//     }
//     if(await addCategory(form)){
//         emit('success')
//     }

// }
// const  editSubmit=async()=>{
//   if(await editCategory(form)){
//     emit('success')
//   }
// }

</script>

<style scoped>
.upload-demo {
  text-align: left;
  width: 91%;
}
</style>